<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>订单发货</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/style/admin.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/modules/layui-icon-extend/iconfont.css"
        rel="stylesheet" />
    <script src="/node_modules/LobsterUIFrame/layuiadmin/layui/layui.js"></script>
        <style>.head {
            font-size: 16px;
            font-weight: bold;
        }

        .wenzi4 {
            color: #999999;
            margin-left: 15px;
        }

        .goods {
            margin-top: 15px;
        }

        .item {
            display: flex;
            align-items: center;
        }

        img {
            width: 80px;
            height: 80px;
        }

        .item {
            width: 300px;
        }

        .num {
            flex: 1;
            text-align: right;
        }

        .wenzi1 {
            font-size: 14px;
        }

        .wenzi2 {
            font-size: 13px;
            color: #999999;
        }

        .wenzi3 {
            font-size: 14px;
            font-weight: bold;
            color: #EE5555;
        }
    </style>
</head>

<body>
<div class="layui-fluid box">
    <div class="layui-form" lay-filter="ruleinfo" style="padding: 0px 0px 0 0;">
        <div class="layui-card">
            <div class="layui-card-body box" id="tempdiv">

            </div>
        </div>
    </div>
</div>
<script id="demo" type="text/html">
    <div class="head">订单信息</div>
    <div><text>订单编号：</text><text class="wenzi4" name="OrderNo">{{d.order.OrderNo}}</text></div>
    <div><text>支付类型：</text><text class="wenzi4" name="PayType">{{d.order.PayTypetxt}}</text></div>
    <div><text>订单状态：</text><text class="wenzi4" name="OrderStatus">{{d.order.OrderStatustxt}}</text></div>
    <div><text>订单金额：</text><text class="wenzi4" name="TotalFee">{{d.order.TotalFee}}</text></div>
    <div class="goods">
        <div class="head">商品信息</div>
        <div id="goodslist">
            {{#  layui.each(d.goodslist, function(index, item){ }}
            <div class="item">
                <div style="width: 80px;text-align: center;">
                    <image src="{{item.SpecImg}}"></image>
                </div>
                <div style="margin-left: 10px;height: 80px;">
                    <div class="wenzi1">{{ item.GoodsName }}</div>
                    <div class="wenzi2">规格：{{ item.SpecName }}</div>
                    <div class="wenzi3">￥{{ item.GoodsPrice }}</div>
                </div>
                <div class="num">x{{ item.GoodsNum }}</div>
            </div>
            {{#  }) }}
        </div>
    </div>
    <div id="wuliu"> 
        {{# if(d.logistics.LogisticsNo!=null){ }}
        <div class="head">物流信息</div>
        <div><text>物流公司：</text><text class="wenzi4">{{d.logistics.LogisticsCompany}}</text></div>
        <div><text>物流单号：</text><text class="wenzi4">{{d.logistics.LogisticsNo}}</text></div>
        {{# }  }}
    </div>
</script>
</body>
<script>
    
layui.config({
    base: '/node_modules/LobsterUIFrame/layuiadmin/' //静态资源所在路径
}).extend({
    index: 'lib/index' //主入口模块
});
    layui.define(["index", "form", "table", "jquery", "layer", "tree", "element", "laytpl"], function (exports) {
    var layer = layui.layer;
    var admin = layui.admin;
    var $ = layui.$;
    var form = layui.form;
    var laytpl = layui.laytpl;
    var oper = {
        data: {
            model: {},
            sellistinfo: {},
            goodslist: [],
            orderstatus: [],
            //订单状态 0 待付款 1待发货 2待收货 3待评价 4已完成 5取消 6退款中 7已退款
            paytype: [],//支付方式：1微信 2 支付宝，3零钱支付 4组合支付
            type: 0,//0编辑 1详情
        },
        init: function () {
            var self = this;
            self.data.sellistinfo = parent.sellistinfo;
            self.data.orderstatus = parent.orderstatus;
            self.data.paytype = parent.paytype;
            var filter = self.data.paytype.filter(a => { return a.Code == self.data.sellistinfo.PayType; });
            if (filter != null && filter.length > 0)
                self.data.sellistinfo.PayTypetxt = filter[0].Name;

            var filter = self.data.orderstatus.filter(a => { return a.Code == self.data.sellistinfo.OrderStatus; });
            if (filter != null && filter.length > 0)
                self.data.sellistinfo.OrderStatustxt = filter[0].Name;

            self.initdata();
            self.initEvent();
        },
        //获取树结构
        initdata: function () {
            var self = this;
            Promise.all([self.GetDict(8142), self.getOrderGoodsList(), self.getLogistics()]).then(res => {
                self.data.orderstatus = res[0].data.appbasedict;
                self.data.goodslist = res[1].data.goodslist;
                var logistics = res[2].data.logistics;
                var getTpl = demo.innerHTML
                    , view = document.getElementById('tempdiv');
                laytpl(getTpl).render({
                    order: self.data.sellistinfo, goodslist: self.data.goodslist, logistics: logistics
                }, function (html) {
                    view.innerHTML = html;
                    self.initSelect(self.data.orderstatus, "LogisticsCompany");
                    form.render("select");
                });
            })
        },
        initSelect: function (data, name) {
            var appendHtml = '';
            appendHtml = "<option value='-1'>全部</option>";
            data.forEach(a => {
                appendHtml += "<option value=" + a.Code + ">" + a.Name + "</option>";
            })
            $("[name=" + name + "]").html(appendHtml);
        },
        //页面加载
        initEvent: function () {
            var self = this;
            parent.getResult = function () {
                self.data.model = {
                    LogisticsCompany: $("[name='LogisticsCompany']").find("option:selected").text(),
                    LogisticsNo: $("[name='LogisticsNo']").val(),
                    OrderNo: self.data.sellistinfo.OrderNo,
                    Status: 1
                };
                self.data.model.IsFrozen = self.data.model.IsFrozen == "on" ? 1 : 0;
                if ($("[name='LogisticsCompany']").val() == -1) {
                    layer.msg("请选择快递公司");
                    return;
                }
                if (!self.data.model.LogisticsNo) {
                    layer.msg("快递单号不能为空");
                    return;
                }
                return self.data.model;
            }
        },
        /**
         * 查询订单商品信息
         * */
        getOrderGoodsList: function () {
            var self = this;
            return new Promise((resolve, reject) => {
                admin.req({
                    url:self.getbaseurl("Mall.GetOrderGoodsList"),
                    method: "get",
                    data: { orderNo: self.data.sellistinfo.OrderNo },
                    done: res => {
                        if (res.code == 0) {
                            resolve(res);
                        } else {
                            reject(res);
                        }
                    }
                })
            });
        },
        //订单物流
        getLogistics: function () {
            var self = this;
            return new Promise((resolve, reject) => {
                admin.req({
                    url:self.getbaseurl("Mall.GetOrderLogistics"),
                    method: "get",
                    data: { orderNo: self.data.sellistinfo.OrderNo },
                    done: res => {
                        if (res.code == 0) {
                            resolve(res);
                        } else {
                            reject(res);
                        }
                    }
                })
            });
        },
      //获取应用字典
      GetDict: function (classId) {
                return new Promise((resolve, reject) => {
                    admin.req({
                        url: '/common/v1/BasicData/GetAppBaseDict',
                        method: "get",
                        data: {
                            classId: classId,
                            appKey: "APP20200616102057595"
                        },
                        done: res => {
                            resolve(res);
                        }
                    });
                })
            },
            getbaseurl: function (fun) {
                var url = "/lowcode/APP20200616102057595/shop/?view=layui&fun=" + fun;
                return url;
            },

    }
    oper.init() 
});
</script>
</html>
